<template>
  <div class="lct">
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size">
        <span class="euds">{{ activity.time }}</span>
        <el-card>
          <!-- 伪类 -->
          <div class="tri_left"></div>
          {{ activity.operationState }}
          <p class="aoub">{{ activity.result }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  props: {
    activities: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      // activities: [
      //   {
      //     time: '2018-04-15 08:30:20',
      //     operationState: '发起 张三 [已办理->部门负责人]',
      //     result: '同意',
      //     color: '#0bbd87'
      //   },
      //   {
      //     time: '2018-04-18 09:25:18',
      //     operationState: '部门负责人 李四 [已办理->公司负责人]',
      //     result: '同意',
      //     color: '#0bbd87'
      //   },
      //   {
      //     time: '2018-04-20 10:40:20',
      //     operationState: '公司负责人 王五 [已办理->结束]',
      //     result: '同意',
      //     color: '#0bbd87'
      //   }
      // ],
    }
  }
}
</script>

<style lang="scss">
.lct ::v-deep  .el-timeline{
  position: relative !important;
  width: 80% !important;
  margin: 3% auto 0px !important;
}
.lct ::v-deep  .el-card {
  background:#f8f8f8 !important;
}
</style>